<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root" :x="n">
    <h2 v-text="n"></h2>
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        //不提倡使用template(模板标签)，他会把整个容器都会替换点
        // template:`
        // 	<div>
        // 		<h2>当前的n值是：{{n}}</h2>
        // 		<button @click="add">点我n+1</button>
        // 	</div>
        // `,
        data: {
            n: 1
        },
        methods: {
            add() {
                console.log('add')
                this.n++
            },
            bye() {
                console.log('bye')
                this.$destroy()
            }
        },
        watch: {
            n() {
                console.log('n变了')
            }
        },
        //此时：无法通过vm访问到data中的数据、methods中的方法
        //指的是数据代理、数据监测创建之前
        beforeCreate() {
            console.log("此时：无法通过vm访问到data中的数据、methods中的方法");
            console.log('===beforeCreate===')
        },
        //此时：可以通过vm访问到data中的数据、methods中配置
        //指的是数据代理、数据监测创建完毕
        created() {
            console.log("此时：可以通过vm访问到data中的数据、methods中配置")
            console.log('===created===')
        },
        /**
         * 此时：
         * 1.页面呈现的是未经Vue编译的DOM结构。
         * 2.所有对DOM的操作，最终都不会奏效(所有数据他都拿到手上了，你再来新数据，他又不会知道)
         */
        beforeMount() {
            console.log('此时：1.页面呈现的是未经Vue编译的DOM结构。2.所有对DOM的操作，最终都不会奏效');
            console.log('===beforeMount===')
        },
        /**
         * 此时：
         * 1.页面呈现的是经过Vue编译的DOM。
         * 2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作
         */
        mounted() {
            console.log('此时：1.页面呈现的是经过Vue编译的DOM。2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作');
            console.log('===mounted===');
            console.log('真实dom', this.$el instanceof HTMLElement);
            debugger;
        },
        //以上流程都是挂载流程
        //更新流程，数据是新，页面是旧的
        /**
         * 此时：数据是最新的，但页面是旧的，即：页面尚未和数据保持同步
         */
        beforeUpdate() {
            console.log('此时：数据是最新的，但页面是旧的，即：页面尚未和数据保持同步')
            console.log('===beforeUpdate===')
        },
        //两个方法之间有一次DIFF算法
        /**
         * 此时：数据是最新的，页面也是最新的，即：页面和数据保持同步
         */
        updated() {
            console.log('此时：数据是最新的，页面也是最新的，即：页面和数据保持同步');
            console.log('==updated==');
            this.n++;//此时死循环了
        },
        //调用vm.$destroy()启动销毁相关方法
        /**
         * 此时：vm中的所有的:data、methods、指令等等都处于可用状态，马上要执行销毁过程，
         * 在这个生命周期钩子函数中，不会在触发数据的更新
         * 一般在此阶段：关闭定时器、取消订阅信息、解绑自定义事件等收尾工作
         */
        beforeDestroy() {
            console.log('此时：vm中的所有的:data、methods、指令等等都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅信息、解绑自定义事件等收尾工作');
            console.log('vm', this);
            console.log('===beforeDestroy===');
        },
        /**
         * Vue容器销毁
         */
        destroyed() {
            console.log('===destroyed===');
        },
    })
</script>
</html>